<template>
  <!-- 设备运行时长 -->
  <div class="runningTime">
    <div class="title text-shadow">设备运行时长</div>
    <scEcharts :option="option" width="100%"></scEcharts>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
import * as echarts from 'echarts'
export default {
  name: 'runningTime',
  components: {
    scEcharts
  },
  data () {
    return {
      seriesData: [],//运行时长数据
      quipmentList: [],//设备列表
      maxData: [],//背景按最大值
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return '编号' + params[0].name + ' : ' + params[0].value + '年'
          }
        },
        grid: {
          borderWidth: 0,
          top: '10%',
          left: '5%',
          right: '10%',
          bottom: '5%'
        },
        xAxis: {
          name: '小时',
          type: 'value',
          // boundaryGap: [0, 0.01],
          nameTextStyle: {
            color: "#fff",
          },
          nameLocation: "end",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#005F74"
            }
          },
          axisLabel: {
            show: true,
            color: "#D9E1FF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },

        },
        yAxis: [{
          name: '编号',
          type: 'category',
          inverse: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#005F74"
            }
          },
          nameTextStyle: {
            color: "#fff",
          },
          nameLocation: "start",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: "#D9E1FF",
          },
          data: [],//编号
        },
        {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '12'
            },
          },

          data: []
        }],
        series: [
          {
            name: '2011',
            type: 'bar',
            barWidth: 20,
            barCategoryGap: "50%",
            zlevel: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0.3,
                  color: '#0D69FF'
                }, {
                  offset: 1,
                  color: '#00FEFF'
                },
                {
                  offset: 1,
                  color: '#00FEFF'
                }]),
              },
            },
            data: []
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            barCategoryGap: "50%",
            itemStyle: {
              normal: {
                color: 'rgba(0, 46, 119, 0.4)'
              }
            },
            data: []
          },
        ]
      }
    }
  },
  mounted () {
    this.setData()
  },
  methods: {
    async setData () {
      let { data } = await this.$API.produce.workOrder.getRunningTime.get()
      let timeList = data
      this.seriesData = timeList.map(item => item.equipmentWorkHour)//时长
      this.quipmentList = timeList.map(item => item.equipmentCode)//设备
      this.maxData = (new Array(this.seriesData.length)).fill(100)
      this.option.yAxis[0].data = this.quipmentList
      this.option.series[0].data = this.seriesData
      this.option.series[1].data = this.maxData
      console.log(this.option)
    },
  }
}
</script>
<style lang="scss" scoped>
.runningTime {
  height: 100%;
  width: 25%;
}
</style>